import { useRef, useState, useEffect } from 'react';
import { Button, Row, Col, Input, Popconfirm, Select,Typography,Tooltip, message } from 'antd';
const { Paragraph } = Typography;
import { EyeTwoTone, EditTwoTone, DeleteFilled } from '@ant-design/icons';
const { Search } = Input
import {
    EditableProTable
} from '@ant-design/pro-components';
import { FormattedMessage, useIntl } from "umi";
import CompetitionTeamDetailInfoPanel from './CompetitionTeamDetailInfoPanel';
import CompStatusEnum from '@/components/Enum/CompStatusEnum';
import { ROW_ID_KEY, OPERATE_VIEW, SELECT_LABEL, SELECT_VALUE } from '@/constants';
import { paginationQuery } from '@/services/competitionTeam';
import { queryRoughInfoList } from '@/services/competition';
import { render } from '@testing-library/react';
const PaginationQueryCompetitionTeamTable = ({ data }) => {
    const intl = useIntl();
    const [showPanel, setShowPanel] = useState(false);
    const [formData, setFormData] = useState()
    const [operateType, setOperateType] = useState()
    const [compSelectData, setCompSelectData] = useState();
    //已经选择的赛事数据
    const [compSelected, setCompSelected] = useState();
    const [selectLoading, setSelectLoading] = useState(true);
    const [paginationData, setPaginationData] = useState({ 'current': 1, 'pageSize': 10, 'total': 0 });
    const [editableKeys, setEditableRowKeys] = useState([]);
    const ref = useRef();
    useEffect(() => {
        initCompetitionSelectData()
    }, [])
    async function getData(params) {
        params.competitionUnCode = compSelected?.unCode
        let res = await paginationQuery(params);
        if (res.success) {
            let resData = {
                ...res?.data,
                data: res?.data?.records
            }
            return resData
        }
    }
    const initCompetitionSelectData = async () => {
        await queryRoughInfoList().then(res => {
            if (res.success) {
                setCompSelectData(res.data)
                setSelectLoading(false)
            }
        }).catch(err => {
            setSelectLoading(false)
        })
    }
    const compSelectOnChange = (_, option) => {
        setCompSelected({ ...option })

        //重新加载分页查询数据
        ref.current.reload();
    }
    let openPanel = (operateType, data, e) => {
        setFormData(data)
        setShowPanel(true);
        setOperateType(operateType);
    };
    let closePanel = () => {
        setShowPanel(false)
        ref.current.reload();
    }
    const onView = (record) => {
        openPanel(OPERATE_VIEW, record)
    }
    const onEdit = (record) => {
        message.info('功能完善中...');
    }
    //TODO 将其抽离成一个外部方法
    let onPaginationChange = (current, pageSize) => {
        debugger
        setPaginationData({ ...paginationData, current, pageSize })
        getData({ current, current, pageSize, pageSize })
    }
    // columns
    const columns = [
        {
            title: '队伍名称',
            dataIndex: 'teamName',
            ellipsis: true,
            width: 130,
            editable: false,
        },
        {
            title: '容器id',
            dataIndex: 'containerId',
            render:(text) => <Tooltip title={text}><Paragraph ellipsis={true} copyable={text}>{text}</Paragraph></Tooltip>,
            width: 130,
            hideInSearch: true,
            editable: false,
        },
        {
            title: '动态flag',
            dataIndex: 'dynamicFlagValue',
            render:(text) => <Tooltip title={text}><Paragraph ellipsis={true} copyable={text}>{text}</Paragraph></Tooltip>,
            hideInSearch: true,
            editable: false,
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            valueType: 'dateTime',
            hideInSearch: true,
        },
        {
            title: '创建人',
            dataIndex: 'createBy',
            hideInSearch: true,
        },
        {
            title: '最后更新时间',
            dataIndex: 'updateTime',
            valueType: 'dateTime',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '更新人',
            dataIndex: 'updateBy',
            hideInSearch: true,
            editable: false,
        },
        {
            title: '操作',
            valueType: 'option',
            hideInSearch: true,
            fixed: 'right', //固定列
            width: 150,
            dataIndex: { ROW_ID_KEY },
            render: (text, record, _, action) => [
                <Button type="text" key={'view'} shape="circle" size='small' onClick={() => { onView(record) }} icon={<EyeTwoTone />} />,
                <Button type="text" key={'edit'} shape="circle" size='small' onClick={() => { onEdit(record) }} icon={<EditTwoTone />} />,
                <Popconfirm
                    key={'delete'}
                    title={intl.formatMessage({
                        id: 'pages.Popconfirm.title',
                        defaultMessage: '确认删除'
                    })}
                    toolBar
                    description={intl.formatMessage({
                        id: 'pages.Popconfirm.description',
                        defaultMessage: '是否删除该条记录？'
                    })}
                    onConfirm={() => { onDelete(record) }}
                    okText={intl.formatMessage({
                        id: 'pages.Popconfirm.okText',
                        defaultMessage: '确认'
                    })}
                    cancelText={intl.formatMessage({
                        id: 'pages.Popconfirm.cancelText',
                        defaultMessage: '取消'
                    })}>
                    <Button type="text" danger shape="circle" size='small' icon={<DeleteFilled />} />
                </Popconfirm>,

            ],
        },
    ];
    return (
        <>
            {showPanel && (operateType === OPERATE_VIEW) && <CompetitionTeamDetailInfoPanel data={formData} closePanel={closePanel} />}
            <EditableProTable
                actionRef={ref}
                search={false}
                options={{ fullScreen: false, reload: true, density: true, setting: true }}
                columns={columns}
                request={async (params = {}) => getData(params)
                }
                recordCreatorProps={false}
                pagination={{
                    pageSize: paginationData.pageSize,
                    total: paginationData.total,
                    current: paginationData.current,
                    showSizeChanger: true,
                    onChange: onPaginationChange
                }}
                rowKey={ROW_ID_KEY}
                dateFormatter="string"
                headerTitle='参赛队伍管理'
                toolBarRender={() => [
                    <>
                        <Row align='middle' justify="end" style={{ width: '400px' }}>
                            <Col span={18}>
                                <Select
                                    loading={selectLoading}
                                    fieldNames={{ label: SELECT_LABEL, value: SELECT_VALUE }}
                                    showSearch
                                    onChange={compSelectOnChange}
                                    placeholder="查询并选择赛事"
                                    filterOption={(input, option) =>
                                        (option?.name ?? '').toLowerCase().includes(input.toLowerCase())
                                    }
                                    options={compSelectData}
                                />
                            </Col>
                            <Col span={6}>
                                {CompStatusEnum(compSelected?.statusFlag)}
                            </Col>
                        </Row>

                    </>
                ]}

                editable={{
                    type: 'multiple',
                    editableKeys,
                    onSave: async (rowKey, data, row) => {
                        onEdit(rowKey, data, row)
                    },
                    onDelete: async (rowKey, data, row) => {
                        onDelete(data)
                    },
                    onChange: setEditableRowKeys,
                }}
            ></EditableProTable>
        </>
    );
}
export default PaginationQueryCompetitionTeamTable